<template>
    <div class="home">
		<div class="homeHeader clearfix">
			<!--头部导航-->
			<div class="logoImgBox">
				<img class="logoImg" src="../../static/image/EastXin1.png"/>
			</div>
			<ul class="navbar">
				<li>
					<router-link to="/home/index" tag="p" class="lisTex" active-class="navBarLisOn">
						<img src="../../static/image/home.png" alt="" class="lisIcon" />
						我的项目
					</router-link>
				</li>
				<li>
					<router-link to="/home/workpage" tag="p" class="lisTex" active-class="navBarLisOn">
						<img src="../../static/image/code.png" alt="" class="lisIcon" />
						闲聊技术
					</router-link>
				</li>
				<li>
					<router-link to="/home/docpage" tag="p" class="lisTex" active-class="navBarLisOn">
						<img src="../../static/image/book.png" alt="" class="lisIcon" />
						日常小记
					</router-link>
				</li>
			</ul>
			<!-- 登录用户头像显示/注销登录 -->
			<div class="userBox clearfix" v-on:click="showLogoutFn">
				<div class="userImg fl"><img src="../../static/image/userImg.jpg" alt=""></div>
				<a class="userName fl">{{userName}}</a>
				<div class="ivueDropBox" v-if="showLogoutBox">
					<a href="javascript:;" v-on:click="backLoginFn">注销登录</a>
				</div>
			</div>
		</div>
		<!--列表导航-->
		<div class="shownavtext clearfix">
			<span class="homet">首页</span><span class="contt">　/　{{nav[$route.path]}}</span>
		</div>
		<!--渲染导航对应内容区域-->
		<div class="pageConts">
			<router-view></router-view>
			<!-- 引入底部说明 -->
			<footerInfos></footerInfos>
		</div>
		<div class="cornerFn">
			<!-- 右下角的功能区 -->
			<cornerMenu v-on:listenChangeData="showDataFromChild"></cornerMenu>
			<!-- 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 -->
		</div>
		<div class="feedBackBox" v-if="feedBackShow">
			<!-- 意见反馈弹窗模块 -->
			<feedBack v-on:listenChangeStr="hideDataFromChild"></feedBack>
		</div>
    </div>
</template>

<script>
	import mypage from './home/mypage';
	import workpage from './home/workpage';
	import docpage from './home/docpage';
	import footerInfos from './pageModule/footerInfos';
	import cornerMenu from './pageModule/cornerFn';
	import feedBack from './pageModule/feedBack';
	
	export default{
		name: 'home',
		components: {
			mypage,
			workpage,
			docpage,
			footerInfos,
			cornerMenu,
			feedBack
		},
		watch: {
			$route(){
				// console.log(this.$route.path)
			}
		},
		created () {//监听导航的变化
			// console.log(this.$route.path,this.$route.query.name)
			this.routePath = this.$route.path;
			this.userName = unescape(localStorage.name);//从缓存中获取用户登录名字
		},
		data () {
			return {
				contenttext: '我的项目',//初始化展示
				nav:{
					'/home/index': '我的项目',
					'/home/docpage': '日常小记',
					'/home/workpage': '闲聊技术',
					'/home/index/itemsDetails': '我的项目 / 项目详情',//我的项目下面的项目详情
					'/home/workpage/articleDetails': '闲聊技术 / 文章详情'//闲聊技术下面的文章详情
				},
				feedBackShow: false, //初始化的时候隐藏掉意见反馈的弹窗
				showLogoutBox: false, //初始化的时候隐藏注销登录框
				userName: ''  //初始化用户登录名字				
			}
		},
		methods: {
			navBarClick: function (event){
				console.log(event)
			},
			showDataFromChild: function (str){
				// console.log(str)
				this.feedBackShow = str;
			},
			hideDataFromChild: function (str){
				this.feedBackShow = str;
			},
			showLogoutFn: function (){//处理注销登录按钮的显示和隐藏
				if(this.showLogoutBox){
					this.showLogoutBox = false;
				}else{
					this.showLogoutBox = true;
				}
			},
			backLoginFn: function (){//点击注销登录返回登录页
				console.log('1231321321')
				window.location.href = '/login';
			}
		}
    }
	
</script>

<style>
@import '../../static/css/commoms.css';
	.home{
		width: 100%;
		height: 100%
	}
	.homeHeader{
		width: 100%;
		height: 60px;
		padding: 0 20px;
		background: #2C3E50;
	}
	.logoImgBox{
		height: 100%;
		padding-top: 15px;
		float: left;
	}
	.navbar{
		float: left;
	}
	.navbar li{
		float: left;
		width: 120px;
		line-height: 55px;
		color: #bfcbd9;
		font-size: 14px;
		cursor: pointer;
	}
	.navbar li p{
		width: 100%;
		border-bottom: 5px solid #2C3E50;
	}
	.navbar li:hover p{
		border-bottom: 5px solid #eff2f7;
		font-weight: bold;
	}
	.navbar li .navBarLisOn{
		border-bottom: 5px solid #eff2f7;
		font-weight: bold;
	}
	.logoImg{
		vertical-align: middle;
	    height: 20px;
	    cursor: pointer;
	}
	.lisIcon{
		float: left;
		width: 16px;
		height: 16px;
		margin: 18px 5px 0 20px;
	}
	.lisTex{
		float: left;
		text-align: left;
	}
	.shownavtext{
		width: 100%;
		height: 30px;
		background: #eff2f7;
		padding-left: 30px;
		overflow: hidden;
	}
	.shownavtext span{
		float: left;
		font-size: 12px;
		line-height: 30px;
	}
	.homet{
		color: #48576a;
	}
	.homet:hover{
		color: #20a0ff;
	}
	.contt{
		color: #97a8be;
	}
	.showcontent{
		width: 100%;
		background: #fff;
		padding-top: 50px;
		font-size: 18px;
	}
	.pageConts{
		width: 100%;
		height: 100%;
	}
	.userBox{
		width: 120px;
		padding-top: 10px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 999;
		cursor: pointer;
	}
	.userImg{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 2px solid #ccc;
		overflow: hidden;
	}
	.userImg img{
		width: 100%;
		height: 100%;
	}
	.userName{
		width: 80px;
		height: 40px;
		padding-left: 8px;
		line-height: 40px;
		color: #fff;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
	}
	.ivueDropBox{
		width: 100%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 60px;
		background: #f2f2f2;
		box-shadow: grey 5px 5px 50px -5px;
	}
	.ivueDropBox a{
		color: #2C3E50;
		font-size: 14px;
		line-height: 36px;
	}
</style>